<template>
  <div class="login">
    <div class="logo sp-whitespace">
      <!-- <div class="logo-icon"></div> -->
    </div>
    <div class="login-content">
      <div class="login-phone">
        <h5 class="title font-16">手机直接登录</h5>
        <div class="sp-whitespace font-14">
          <div class="input-wrap">
            <input
              type="tel"
              placeholder="请输入手机号"
              class="input"
              v-model="LoginFrom.phone"
            >
          </div>
          <div class="input-wrap">
            <input
              placeholder="请输入姓名"
              class="input"
              v-model="LoginFrom.name"
            >
          </div>
          <div class="login-btn" @click="onLogin">登录</div>
        </div>
      </div>
      <div class="login-wei">
        <h5 class="title font-12">登录参与活动</h5>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios'
export default {
  name: "Login",
  data() {
    return {
      LoginFrom: {
        phone: "",
        name: ""
      }
    };
  },
  verify: {
    LoginFrom: {
      phone: ["mobile"],
      pass: [
        {
          minLength: 1,
          message: "密码不能为空"
        }
      ]
    }
  },
  created() {},
  methods: {
    onLogin() {

    const regPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[56]|17[0135678]|18[0-9]|19[189])\d{8}$/;
    const regName = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;

    if (!regPhone.test(this.LoginFrom.phone)) {
      Toast('手机号码格式不正确');
      return
    }
    if (!regName.test(this.LoginFrom.name)) {
      Toast('姓名格式不正确');
      return
    }
    Toast.loading({
      mask: true,
      message: '登录中...'
    });
      axios.post('http://47.52.108.198:10094/app/login', this.LoginFrom)
        .then((res) => {
          const data = res.data
          if (data.success) {
            Toast.success('登录成功！');
            setTimeout(() => {
              this.$router.push({ path:'/code', query:{
                addr: data.data.addr ,  
              }})
              Toast.clear()
            }, 500)
          }
        })
        .catch((error) => {
          Toast.fail('登录失败！');
        })
    }
  }
};
</script>
<style scoped lang="scss" type="text/scss">
input::-webkit-input-placeholder {
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
}
.login {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../assets/login-bg.png");
  &-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 84%;
    margin: 20px auto;
    .login-phone {
      padding-bottom: 0.2rem;
      background: rgba(1, 210, 91, 0.9);
      box-shadow: 0 5px 20px 0 rgba(11, 84, 151, 0.15);
      border-radius: 5px 5px 0 0;
      & > .title {
        padding: 20px 0;
        text-align: center;
        color: #fff;
      }
      .sp-whitespace {
        padding: 0 20px;
      }
      .input-wrap {
        padding: .1rem .08rem;
        margin-bottom: 15px;
        border-radius: 5px;
        background: #a4f1ba;
      }
      .input {
        width: 100%;
        max-height: 30px;
        font-size: 16px;
        border: 0;
        background: #a4f1ba;
        display: block;
        outline: none;
      }
      .login-btn {
        height: .4rem;
        line-height: .4rem;
        margin-top: 5px;
        text-align: center;
        font-size: .16rem;
        color: #01d25b;
        background: #ffffff;
        box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.15), inset 0 -3px 0 0 #dde6dd;
        border-radius: 5px;
        &:active {
          box-shadow: -3px 0px 5px 0 rgba(0, 0, 0, 0.25),
            inset 0 -3px 0 0 #dde6dd;
        }
      }
    }
    .login-wei {
      padding-bottom: 30px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #ffffff;
      box-shadow: 0 5px 20px 0 rgba(11, 84, 151, 0.15);
      border-radius: 0 0 5px 5px;
      & > .title {
        padding-top: 20px;
        text-align: center;
        color: #888;
      }
      & > i {
        display: block;
        text-align: center;
        margin: 5px auto 0 auto;
        font-size: 35px;
        color: #0fde7a;
      }
    }
  }
}
</style>
